今天終於第五天了，沒想到超過五天了，之前大概以為我只會三天就會放棄了，依舊每天來點負能量XD

父層選取器＆的用法，對於scss用的範圍可以說是非常的廣，像BEM的命名方式，蠻常會用到這個方法，來處理我們對於有一些重復class做一些名稱上縮排，可以重複使用外部選擇器名稱等

編譯前
.group {
  /*群組*/
  .group__card {
    /*群組裡的卡片組建*/
    .group__img {
      /*卡片的圖片*/
      width: 100%;
    }
    .group__text {
      /*卡片的文字區域*/
      width: 100%;
      .group__title {
        font-size: 24px;
        /*卡片的文字標題*/
      }
      .group__info {
        font-size: 16px;
        /*卡片的內文*/
      }
    }
  }
}

編譯後
.group {
  /*群組*/
}

.group .group__card {
  /*群組裡的卡片組建*/
}

.group .group__card .group__img {
  /*卡片的圖片*/
  width: 100%;
}

.group .group__card .group__text {
  /*卡片的文字區域*/
  width: 100%;
}

.group .group__card .group__text .group__title {
  font-size: 24px;
  /*卡片的文字標題*/
}

.group .group__card .group__text .group__info {
  font-size: 16px;
  /*卡片的內文*/
}

上面的例子，我們單純以scss結構來看的話，scss很清楚可以看到階層相關配置，組建相關等級也非常的清楚，如卡片裡面就是有圖片，跟文字區塊等，不過這樣有個不好的原因，反而讓我們編譯的css異常的肥大，如下最下面內為部分基本上我們這樣四層了，對於css效能來說非常的不好，因為過度層級代表以後也有些屬性可能要修改，會有遇到權重上的問題，這時候我們就可以使用＆的這個符號來處理這樣的問題

編譯前
.group {
  /*群組*/
  &__card {
    /*群組裡的卡片組建*/
  }
  &__img {
    /*卡片的圖片*/
    width: 100%;
  }
  &__text {
    /*卡片的文字區域*/
    width: 100%;
  }
  &__title {
    font-size: 24px;
    /*卡片的文字標題*/
  }
  &__info {
    font-size: 16px;
    /*卡片的內文*/
  }
}

編譯後
.group {
  /*群組*/
}

.group__card {
  /*群組裡的卡片組建*/
}

.group__img {
  /*卡片的圖片*/
  width: 100%;
}

.group__text {
  /*卡片的文字區域*/
  width: 100%;
}

.group__title {
  font-size: 24px;
  /*卡片的文字標題*/
}

.group__info {
  font-size: 16px;
  /*卡片的內文*/
}

上面的範例，利用父層方式去降低，CSS層級，使用還是需要考量一下SCSS層級，這樣是否有方便去讓我們解讀結構跟結構之間，他們是如何包覆的，＆這個符號會脫離去記上一層的class，無法讓我們無法從單純scss結構知道每一個層級關係，如卡片的文字區域我們會以為他跟文字標題和文字內文是同一個是相同層級屬於同一個區塊，如果全部拆開有可能在結構上使用者比較不好理解，在使用上也是需要有考量，scss可讀性狀況，和不要有過深的層級，讓兩者達到一個比較好的平衡點